<template>
  <view class="wrapper" @tap.stop="navToDetail(info)">
    <view class="wrap-box">
      <view class="square-wrap">
        <view class="square-box">
          <image :src="info.thumb"  mode="aspectFill"></image>
        </view>
      </view>
      <view class="content">
        <view class="text-df text-333 text-cut-2" >
          <block v-if='info.goods_label'>
            <text  class="item-goods-label" v-for='item in info.goods_label'>
              {{item}}
            </text>
          </block>
          <text class="new_style">{{info.name}}</text>
        </view>
        <view class="shop_price text-price ">{{ info.market_price }}</view>
        <view class=" margin-top-sm flex ">
          <view >
            <text class="text-lg-new text-bold margin-right-8 text-prices" style="font-size: 36rpx;"> {{ info.integral }}</text>
            <text class="text-sm-new ">{{i18n['积分']}}</text>
          </view>
          <view v-if="info.shop_price>0" >
            <text class="text-sm-new">+</text>
            <text class="text-lg-new text-bold margin-right-8 text-prices" style="font-size: 36rpx;"> {{info.shop_price}}</text>
              <text class="text-sm-new ">{{i18n['元']}}</text>
          </view>
        </view>
        <!-- <view  class="round cu-btn buttons  text-white text-white"> 立即兑换 </view> -->

      </view>
    </view>
  </view>
</template>

<script>
  import fuImage from "../../../../components/fu-image/fu-image";
  /**
   * is_pure_integral  判断是否为纯积分兑换
   * 1：为纯积分兑换
   * 0：为积分+钱 兑换
   */
  export default {
    props: {
      info: {
        type: Object
      },
    },
    components: {fuImage},
    methods: {
      navToDetail(item) {
        this.$emit('navToDetail',item)
      },

    },
  }
</script>

<style lang="scss" scoped>
  .text-sm-new{
    font-size: 22rpx;
  }
  .text-lg-new{
    font-size: 28rpx;
  }
  .margin-right-8{
    margin-right:8rpx;
  }
  .wrapper {
    overflow: hidden;
    margin:0 5rpx ;
    margin-bottom: 20rpx;
    // border:1px solid red;
	width: 345rpx;
    padding: 0 5rpx;

    .wrap-box {
      background-color: #FFFFFF;
      border-radius: 24rpx;
      .square-wrap {
        width: 100%;
        height: 0;
        padding-bottom: 100%;
        box-sizing: border-box;
        position: relative;
        .square-box {
          position: absolute;
          left: 0;
          top: 0;
          right: 0;
          bottom: 0;
          border-radius: 16rpx;

          image {
            width: 100%;
            height: 100%;
            border-radius: 16rpx ;
          }
        }

      }
      .image{
        width: 100%;
        // border-radius: 24rpx 24rpx 0 0;
      }
    }

    .content {
      padding: 20rpx 20rpx;
    }
  }
  .buttons{
    font-size: 24rpx;
    letter-spacing: 3rpx;
    width: 100%;
    margin-top:10rpx;
    height:60rpx;
    line-height:60rpx;
    background: $bgtheme ;
  }

  .text-cut-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }



  .text-333 {
    color: #333333;
  }

  .text-999 {
    color: #999999;
  }

  .name-title {
    position: relative;
  }

  .name-title-label {
    float: left;
  }

  .item-goods-label {
    background: $bgtheme;
    padding: 2rpx 5rpx;
    color: #ffffff;
    font-size: 24rpx;
    border-radius: 6rpx;
    margin-right: 9rpx;
  }
  .new_style{
    font-size: 28rpx;
    font-weight: 500;
    color: #333333 !important;

  }
  .item-activity-label {
    padding: 2rpx 5rpx;
    /* margin: 5rpx; */
    font-size: 24rpx;
    border-radius: 6rpx;
    border: 1px solid;
    margin: 0rpx 1px 0px;
    display: inline-block;
    transform:scale(.8)
  }
  .shop_price{
  padding-top: 16rpx;
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: #666666;

  }
</style>
